<!--
代码模板说明：
1.codeGenaratorExample 为例子用的实体名称，可批量替换掉
2.表单字段替换成自己业务的表单字段
3.请求地址自行替换
-->
<template>
  <div id="lap-app" v-loading="pFormLoading">
    <el-row class="lap-form-body">
      <!--基本表单信息-->
      <el-form ref="form" label-width="120px" :model="pFormData" :rules="rules">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="模拟器名称">{{ pFormData.Name }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="类">{{ pFormData.TypeFullName }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="调用方法"
              >{{ pFormData.Method }}
              <div
                v-if="pFormData.Direct === 0"
                class="label-memo"
                style="color: #f00"
              >
                说明：调用方法的入参，及为模拟脚本的入参。
              </div>
              <div v-else class="label-memo" style="color: #f00">
                说明：模拟脚本的返回值数组，需要和调用方法的参数个数、结构匹配。
              </div></el-form-item
            >
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="描述">{{
              pFormData.Description
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="模拟脚本" prop="Code">
              <MonacoEditor
                style="border: 1px solid #ccc"
                height="500"
                language="javascript"
                :editorOptions="editorOptions"
                @mounted="onMounted"
                @codeChange="onCodeChange"
              ></MonacoEditor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item>
              <el-button
                type="primary"
                :disabled="pFormLoading"
                @click="(e) => onSubmit(e, { close: false })"
                >保存</el-button
              >
              <el-button type="warning" @click="() => onDebug(pFormData)"
                >调试</el-button
              >
              <el-button
                type="warning"
                v-if="pFormData.Direct === 1"
                @click="() => onThirdRequest(pFormData)"
                >发送第三方主动请求</el-button
              >
              <el-dropdown
                v-for="act in mockActionList"
                :key="act.ActionID"
                split-button
                type="info"
                style="margin: 0px 5px"
                @click="
                  () => {
                    $message.error('交互试按钮只能在模拟数据中操作');
                  }
                "
              >
                {{ act.ActionName }}
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="() => onEditMockAction(act)"
                    >编辑脚本</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="() => onDeleteMockAction(act)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <el-tooltip
                v-if="pFormData.Direct === 1"
                content="自定义交互式业务按钮"
                placement="bottom"
              >
                <el-button
                  @click="
                    () => {
                      editVisibleActionForm = true;
                    }
                  "
                  icon="el-icon-plus"
                ></el-button>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <!--编辑框-->
    <el-dialog
      custom-class="lap-form-edit"
      title="新增交互按钮"
      v-if="editVisibleActionForm"
      :visible.sync="editVisibleActionForm"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        ref="actionForm"
        label-width="120px"
        :model="actionFormData"
        :rules="actionFormRules"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="按钮名称" prop="ActionName">
              <el-input
                type="text"
                v-model="actionFormData.ActionName"
                maxlength="20"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="lap-form-footer">
          <el-button type="primary" @click="onAddMockAction">确定</el-button>
        </el-row>
      </el-form>
    </el-dialog>

    <!--动作按钮脚本编辑页面-->
    <el-dialog
      custom-class="lap-form-edit lap-dialog-full"
      title="交互按钮脚本配置"
      v-if="editVisibleMockScriptEdit"
      :visible.sync="editVisibleMockScriptEdit"
      :close-on-click-modal="false"
      :before-close="(done) => platBeforeCloseForm(done, 'formEditMockAction')"
      :append-to-body="true"
    >
      <MockActionEdit
        ref="formEditMockAction"
        :mockName="pFormData.Name"
        :dataId="editActionID"
      ></MockActionEdit>
    </el-dialog>
  </div>
</template>

<script>
const MockActionEdit = () => import("./MockActionEdit"); //编辑页面组件
import MonacoEditor from "vue-monaco-editor";
export default {
  mixins: [$lap.FormView],
  name: "lap-app",
  components: { MonacoEditor, MockActionEdit },
  data() {
    return {
      title: "", //页面标题
      pPageFunctionCode: "", //页面功能编码
      pFormData: {
        Name: "",
        Description: "",
        Code: "",
      },
      code: "",
      editor: null,
      /*表单校验规则 */
      rules: {},
      editorOptions: {
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: false,
        automaticLayout: true,
        glyphMargin: true,
        showFoldingControls: "always",
        formatOnPaste: true,
        formatOnType: true,
        folding: true,
      },
      /*自定义业务按钮编辑框*/
      actionFormData: {
        ActionID: "",
        ActionName: "",
      },
      editVisibleActionForm: false,
      actionFormRules: {
        ActionID: [{ required: true, message: "按钮ID不能为空" }],
        ActionName: [{ required: true, message: "按钮名称不能为空" }],
      },
      mockActionList: [],
      editActionID: null,
      editVisibleMockScriptEdit: false,
    };
  },
  methods: {
    /**
     * 平台加载方法
     */
    platLoadData() {
      const that = this;
      if (that.dataId) {
        //编辑/查看模式下查询数据
        that.loadActionList(that.dataId);
        return $lap
          .post("/MYWS/MockHandler.ashx?type=GetMockByName", {
            Name: that.dataId,
          })
          .then((data) => {
            that.pFormData = data;
            if (that.editor) {
              that.editor.setValue(data.Code);
            }
          });
      }
    },
    onMounted(editor) {
      const that = this;
      that.editor = editor;
      if (that.pFormData.Code) {
        that.editor.setValue(that.pFormData.Code);
      }
    },
    onCodeChange(editor) {
      const that = this;
      that.pFormData.Code = that.editor.getValue();
    },
    /**
     * 提交数据
     */
    onSubmit(e, opts = {}) {
      const that = this;
      that.platFormValid("form", () => {
        return $lap
          .submit("/MYWS/MockHandler.ashx?type=SaveCodeData", that.pFormData)
          .then((data) => {
            that.$emit("after-submit", data, opts);
            that.platSetFormDefault();
          });
      });
    },
    /**
     * 调试当前脚本
     */
    onDebug(row) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=DebugMock", {
          Name: row.Name,
        })
        .then((data) => {
          that.$alert(data, {
            title: "调试结果",
            dangerouslyUseHTMLString: true,
            customClass: "show-debug-result",
          });
        });
    },
    /**
     * 模拟第三方请求
     */
    onThirdRequest(row) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=ThirdRequestMock", {
          Name: row.Name,
        })
        .then((data) => {
          that.$message.success("请求成功，请在调用记录中查看！");
        });
    },
    /**
     * 新增业务按钮
     */
    onAddMockAction(row) {
      const that = this;
      that.platFormValid("actionForm", () => {
        $lap
          .post("/MYWS/MockHandler.ashx?type=AddMockAction", {
            ...that.actionFormData,
            MockName: that.pFormData.Name,
          })
          .then((data) => {
            that.editVisibleActionForm = false;
            that.loadActionList(that.pFormData.Name);
          });
      });
    },
    /**
     * 删除模拟动作点
     */
    onDeleteMockAction(row) {
      const that = this;
      $lap
        .delete("/MYWS/MockHandler.ashx?type=DeleteMockAction", {
          ActionID: row.ActionID,
          MockName: that.pFormData.Name,
        })
        .then((data) => {
          that.loadActionList(that.pFormData.Name);
        });
    },
    /**
     * 编辑模拟按钮脚本
     */
    onEditMockAction(row) {
      const that = this;
      that.editActionID = row.ActionID;
      that.editVisibleMockScriptEdit = true;
    },
    /**
     * 加载业务按钮
     */
    loadActionList(mockName) {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=GetMockActionListByMockName", {
          MockName: mockName,
        })
        .then((data) => {
          // that.mockActionList.splice(0, that.mockActionList.length);
          that.mockActionList = data;
        });
    },
  },
};
</script>

<style lang="scss">
.show-debug-result {
  width: 1000px;
  max-height: 70%;
  word-wrap: break-word;
  overflow: auto;
}
</style>